<template>
	<div class="cinema_body">
		<Loading v-if="isLoading"/>
		<Scroller>
			<ul>
				<li v-for="(item) in cinemaList" :key="item.id">
					<div>
						<span>{{item.nm}}</span>
						<span class="q"><span class="price">{{item.sellPrice}}</span> 元起</span>
					</div>
					<div class="address">
						<span>{{item.addr}}</span>
						<span>{{item.distance}}</span>
					</div>
					<div class="card">
						<div v-for="(tag,key) in item.tag" v-if="tag===1" :class="key | formatClass" :key="key">{{key | format}}</div>
					</div>
				</li>
			</ul>
		</Scroller>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				cinemaList: [],//影院列表
				isLoading:true,
				preCityId:-1
			}
		},
		//用了keep-alive缓存系统 在发送ajax请求的时候需要用到activated生命周期
		activated() {
			let cityId = this.$store.state.city.id//动态获取vuex中的当前城市Id
			if(this.preCityId === cityId){return}//如果相同就不执行下面
			this.axios.get('/cinemaList?cityId='+cityId+'').then(res => {
				this.cinemaList = res.data.cinemas
				this.isLoading = false//拿到数据后置为false
				this.preCityId = cityId//更新当前的城市id到preCityId
			})
		},
		//局部过滤器
		filters: {
			format(key) {
				let card = [{
						key: 'allowRefund',
						value: '改签'
					},
					{
						key: 'endorse',
						value: '退'
					},
					{
						key: 'sell',
						value: '折扣'
					},
					{
						key: 'snack',
						value: '小吃'
					},
				];

				for (var i = 0; i < card.length; i++) {
					if (card[i].key === key) {//判断当前对象的key是不是和card数据中的key相同
						return card[i].value
					}
				}
				return ""
			},
			formatClass(key) {
				let card = [{
						key: 'allowRefund',
						value: 'bl'
					},
					{
						key: 'endorse',
						value: 'bl'
					},
					{
						key: 'sell',
						value: 'or'
					},
					{
						key: 'snack',
						value: 'or'
					},
				];

				for (var i = 0; i < card.length; i++) {
					if (card[i].key === key) {
						return card[i].value
					}
				}
				return ""
			}
		}
	}
</script>

<style scoped>
	#content .cinema_body {
		flex: 1;
		overflow-y: hidden;
	}

	.cinema_body ul {
		padding: 20px;
	}

	.cinema_body li {
		border-bottom: 1px solid #e6e6e6;
		margin-bottom: 20px;
	}

	.cinema_body div {
		margin-bottom: 10px;
	}

	.cinema_body .q {
		font-size: 11px;
		color: #f03d37;
	}

	.cinema_body .price {
		font-size: 18px;
	}

	.cinema_body .address {
		font-size: 13px;
		color: #666;
	}

	.cinema_body .address span:nth-of-type(2) {
		float: right;
	}

	.cinema_body .card {
		display: flex;
	}

	.cinema_body .card div {
		padding: 0 3px;
		height: 15px;
		line-height: 15px;
		border-radius: 2px;
		color: #f90;
		border: 1px solid #f90;
		font-size: 13px;
		margin-right: 5px;
	}

	.cinema_body .card div.or {
		color: #f90;
		border: 1px solid #f90;
	}

	.cinema_body .card div.bl {
		color: #589daf;
		border: 1px solid #589daf;
	}
</style>
